<!--
 * @Date: 2023-03-22 12:34:24
 * @LastEditTime: 2023-07-05 16:19:38

 * 介绍:
-->
<script lang="ts" setup>
import omit from "lodash/omit";
const props = withDefaults(
  defineProps<{
    title?: string;
    leftText?: string;
    rightText?: string;
    leftArrow?: boolean;
    border?: boolean;
    fixed?: boolean;
    placeholder?: boolean;
    zIndex?: StrNumber;
    safeAreaInsetTop?: boolean;
    clickable?: boolean;
    show?: boolean;
    bg?: string;
    transition?: string;
    color?: string;
    navClass?: string | string[] | object;
  }>(),
  {
    fixed: true,
    clickable: false,
    border: false,
    bg: "var(--C-B2)",
    show: true,
    transition: "toTop",
  }
);

const emit = defineEmits<{
  (e: "click-left", v: MouseEvent): void;
  (e: "click-right", v: MouseEvent): void;
}>();
const $props = computed(() =>
  omit(props, ["placeholder", "bg", "leftArrow", "transition", "show"])
);
</script>

<template>
  <div class="Rnavbar">
    <teleport to="body">
      <transition :name="props.transition">
        <van-nav-bar
          v-show="show"
          :class="[{ Rnavbar__fixed: fixed }, navClass]"
          @click-left="(e) => emit('click-left', e)"
          @click-right="(e) => emit('click-right', e)"
          v-bind="$props"
          :style="{ '--Rnavbar-bg': props.bg, color: props.color }"
        >
          <template #left>
            <slot name="left">
              <van-icon
                @click="$router.back()"
                v-show="props.leftArrow"
                name="arrow-left"
                color="var(--color)"
                class="active"
              />
            </slot>
          </template>
          <template #title>
            <slot> <div></div> </slot>
          </template>
          <template #right><slot name="right"></slot></template>
        </van-nav-bar>
      </transition>
    </teleport>
    <RnavbarPlaceholder
      v-show="props.placeholder && props.fixed && props.show"
    />
  </div>
</template>

<style lang="scss" scoped></style>
<style lang="scss">
.van-nav-bar {
  background: var(--Rnavbar-bg);
  transition: all 300ms linear;
}
</style>
